<template>
  <div class="dataTable">
    <div class="header">
      <div class="flex">
        <div class="block_icon" />
        <div>区块信息</div>
      </div>
      <div class="search">
        <el-input v-model="searchKey" style="width: 300px;" prefix-icon="el-icon-search" placeholder="请输入区块哈希或区块高度进行搜索" @input="keywordChange" @keyup.enter.native="onSearch" />
      </div>
    </div>
    <el-table
      v-loading="loading"
      :data="dataList"
    >
      <el-table-column
        align="center"
        prop="blockNumber"
        label="块高"
        width="170"
      />
      <el-table-column
        align="center"
        prop="transCount"
        label="交易"
        width="200"
      />
      <el-table-column
        align="center"
        prop="pkHash"
        label="区块哈希"
        width="660"
        show-overflow-tooltip
      >
        <div
          slot-scope="{row}"
          v-clipboard:copy="row.pkHash ? row.pkHash : ''"
          v-clipboard:error="onError"
          v-clipboard:success="onCopy"
          class="textOverflow"
        >
          {{ row.pkHash }}
        </div>
      </el-table-column>
      <el-table-column
        align="center"
        prop="createTime"
        label="创建时间"
        width="250"
      />
    </el-table>
    <el-pagination
      style="text-align: center; margin-top: 20px;"
      :current-page="pager.page"
      :page-sizes="pager.pageSizes"
      :page-size="pager.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pager.total"
      @size-change="pageSizeChange"
      @current-change="pageChange"
    />
  </div>
</template>

<script>
import { getblockList } from '@/api/overview'
export default {
  name: 'DataTable',
  data() {
    return {
      loading: false,
      pager: {
        page: 1,
        pageSizes: [5, 10, 20],
        pageSize: 10,
        total: 0
      },
      dataList: [],
      searchKey: ''
    }
  },
  mounted() {
    this.loadData()
  },
  methods: {
    async loadData() {
      try {
        this.loading = true
        const param = {
          groupId: 1,
          pageNumber: this.pager.page,
          pageSize: this.pager.pageSize
        }
        const reqQuery = {}
        if (this.searchKey) {
          if (this.searchKey.length === 66) {
            reqQuery.pkHash = this.searchKey
          } else {
            reqQuery.blockNumber = this.searchKey
          }
        }
        const { code, data, totalCount } = await getblockList(param, reqQuery)
        if (!code) {
          this.dataList = data
          const { pager } = this
          pager.total = totalCount
        }
      } catch (error) {
        console.error(error)
      } finally {
        this.loading = false
      }
    },
    onSearch() {
      const { pager } = this
      pager.page = 1
      this.loadData()
    },
    keywordChange(keyword) {
      if (!keyword) {
        this.onSearch()
      }
    },
    onCopy() {
      this.$messageOnce.success('复制成功')
    },
    onError() {
      this.$messageOnce.error('复制失败')
    },
    pageSizeChange(val) {
      const { pager } = this
      pager.pageSize = val
      this.loadData()
    },
    pageChange(val) {
      const { pager } = this
      pager.page = val
      this.loadData()
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/mixin.scss";

.dataTable {
	width: 1320px;
	min-height: 500px;
	background: #FFFFFF;
	box-shadow: 0px 6px 25px 0px rgba(0, 0, 0, 0.04);
	border-radius: 10px;
	margin: 0 auto;
	margin-top: 30px;
	padding: 20px;
	.header {
		display: flex;
		justify-content: space-between;
		font-size: 18px;
		font-family: SourceHanSansCN-Medium, SourceHanSansCN;
		font-weight: 500;
		color: #2C2C2C;
		margin-bottom: 30px;
		.block_icon {
			width: 24px;
			height: 24px;
			background: url('../../assets/overview/block.png');
			background-size: 100%;
			margin-right: 20px;
		}
		.search_input {
			width: 300px;
		}
		.search_btn {
			margin-left: 80px;
		}
	}
}

.textOverflow {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.sucess_point{
  @include points;
  display: inline-block;
  background: #52C41A;
}

.fail_point{
  @include points;
	display: inline-block;
  background: #999999;
}

.flex {
	display: flex;
	align-items: center;
}

.search ::v-deep .el-input__inner {
  border-radius: 18px;
}
</style>
